<template>
  <div id="echarts3" style="width:100%;height:280px"></div>
</template>

<script>
// import { sumList } from '@/api/dashboard'
import * as echarts from 'echarts/core'
import { TooltipComponent, LegendComponent } from 'echarts/components'
import { PieChart } from 'echarts/charts'
import { LabelLayout } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
])
export default {
  mounted () {
    this.week()
    // const chartDom = document.getElementById('echarts1')
    // const myChart = echarts.init(chartDom)
    // this.option && myChart.setOption(this.option)
    // console.log(this.option)
  },
  created () {
    // this.week()
  },
  data () {
    return {
      option: {
        legend: {
          orient: 'vertical',
          left: '420',
          data: ['拣货区', '出库区', '暂存库区', '进货暂存区', '出货暂存区'],
          formatter: (name) => {
            const value = this.option.series[0].data.filter(item => item.name === name)[0].value
            // console.log(value)
            const sum = this.option.series[0].data.reduce((p, i) => p + i.value, 0)
            // console.log('综合', sum)
            return `${name}  ${value}  ${(value / sum).toFixed(2)}%`
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b0}: {c0}',
          backgroundColor: 'rgba(50,50,50,0.7)',
          textStyle: {
            color: '#fff'
          }
        },
        left: '100',
        series: [
          {
            type: 'pie',
            data: [
              {
                value: 348,
                name: '拣货区'
              },
              {
                value: 487,
                name: '出库区'
              },
              {
                value: 677,
                name: '暂存库区'
              },
              {
                value: 126,
                name: '进货暂存区'
              },
              {
                value: 298,
                name: '出货暂存区'
              }
            ],
            avoidLabelOverlap: true,
            label: {
              formatter: (data) => { return data.value },
              show: true,
              position: 'inside'
            }
          }
        ]
      }

    }
  },
  methods: {
    async week (type) {
      // const { data } = await sumList({ dimension: type })
      // this.option.dataset.source.splice(0, 1, ['type', ...data.x])
      // this.option.dataset.source.splice(1, 1, [data.data[0].name, ...data.data[0].data])
      // this.option.dataset.source.splice(2, 1, [data.data[1].name, ...data.data[1].data])
      const chartDom = document.getElementById('echarts3')
      const myChart = echarts.init(chartDom)
      this.option && myChart.setOption(this.option)
      // this.option.dataset.source.splice(2, 0, [data.data[1].name, ...data.data[1]])
    },
    month () {},
    year () {}
  }

}
</script>

<style>

</style>
